<template>
  <div class="tnbhzsf" :class="isTopDialog ? 'pointer' : ''" v-if="!isLoading">
    <p class="top">
      <span style="font-weight: 700; font-size: 16px; color: #000">{{
        info.residentName
      }}</span>
      <span style="display: inline-block; margin: 0 20px"
        >证件号：{{ info.idNo }}</span
      >
      <span>填表人：{{ info.createUserId }}</span>
    </p>
    <div class="box">
      <span>随访日期：</span>
      <el-date-picker
        v-model="info.visitDate"
        align="right"
        type="date"
        placeholder="选择随访日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span>随访方式：</span>
      <el-radio-group v-model="info.visitMode">
        <el-radio label="1">门诊</el-radio>
        <el-radio label="2">家庭</el-radio>
        <el-radio label="3">电话</el-radio>
      </el-radio-group>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">症状</p>
    <div class="box">
      <span>咳嗽：</span>
      <el-radio-group v-model="info.cough">
        <el-radio label="1">无咳嗽</el-radio>
        <el-radio label="2">轻度</el-radio>
        <el-radio label="3">中度</el-radio>
        <el-radio label="4">重度</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>咳痰：</span>
      <el-radio-group v-model="info.sputum">
        <el-radio label="1">无痰</el-radio>
        <el-radio label="2">少痰</el-radio>
        <el-radio label="3">中量痰</el-radio>
        <el-radio label="4">多痰</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>呼吸困难：</span>
      <el-radio-group v-model="info.dyspnea">
        <el-radio label="1">剧烈运动时感气短</el-radio>
        <el-radio label="2">快步走或上楼时感气短</el-radio>
        <el-radio label="3">平地正常行走感气短</el-radio>
        <el-radio label="4">日常活动感气短</el-radio>
        <el-radio label="5">静息状态下感气短</el-radio>
      </el-radio-group>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">查体</p>
    <div class="box">
      <p>随访肺功能检查</p>
      <span>FEV1/FCV：</span>
      <el-input
        placeholder="请输入"
        v-model="info.checkFev"
        style="width: 300px"
        size="small"
      >
        <template slot="append">%</template>
      </el-input>
      <div></div>
      <span>FEV1：</span>
      <el-input
        placeholder="请输入"
        v-model="info.checkFev1fcv"
        style="width: 300px"
        size="small"
      >
        <template slot="append">%</template>
      </el-input>
      <div></div>
      <span>检查日期：</span>
      <el-date-picker
        v-model="info.checkDate"
        align="right"
        type="date"
        placeholder="选择检查日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
      <div></div>
      <span>无条件检查</span>
      <el-radio-group v-model="info.checkNone">
        <el-radio label="1">是</el-radio>
        <el-radio label="0">否</el-radio>
      </el-radio-group>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">生活方式</p>
    <div class="box">
      <span>是否吸烟或曾吸烟：</span>
      <el-radio-group v-model="info.isstopsmoking">
        <el-radio label="1">否</el-radio>
        <el-radio label="2">是</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>日常生活是否烧柴：</span>
      <el-radio-group v-model="info.isfirewood">
        <el-radio label="1">否</el-radio>
        <el-radio label="2">是</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>是否有呼吸锻炼：</span>
      <el-checkbox-group v-model="info.isbreathtrain">
        <el-checkbox label="1">无</el-checkbox>
        <el-checkbox label="2">呼吸操</el-checkbox>
        <el-checkbox label="3">缩唇呼吸</el-checkbox>
        <el-checkbox label="4">腹式呼吸</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="box">
      <span>服药依从性：</span>
      <el-radio-group v-model="info.drugCompliance">
        <el-radio label="1">规律</el-radio>
        <el-radio label="2">间断</el-radio>
        <el-radio label="3">不服药</el-radio>
      </el-radio-group>
    </div>

    <p style="font-weight: 900; font-size: 20px; color: #000">用药情况</p>
    <div class="box">
      <div v-for="(item, index) in info.childsItems" :key="index">
        <div>
          <el-autocomplete
            style="width: 95%"
            size="small"
            class="inline-input"
            v-model="item.drug"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <template slot="prepend">药物名称</template>
          </el-autocomplete>
          <i
            class="el-icon-delete"
            style="margin-left: 15px"
            @click="info.childsItems.splice(index, 1)"
          ></i>
          <div style="margin-top: 10px">
            <el-input
              placeholder="请输入..."
              v-model="item.drugUsage"
              style="width: 457px"
              size="small"
            >
              <template slot="prepend">用法每日</template>
              <template slot="append">次/每日</template>
            </el-input>
            <el-input
              placeholder="请输入..."
              v-model="item.dose"
              style="width: 457px; margin-left: 20px"
              size="small"
            >
              <template slot="prepend">用量每次</template>
              <el-select
                v-model="item.usageUnit"
                slot="append"
                style="width: 80px"
                placeholder="请选择"
              >
                <el-option label="mg" value="1"></el-option>
                <el-option label="g" value="2"></el-option>
                <el-option label="μg" value="3"></el-option>
                <el-option label="片" value="4"></el-option>
                <el-option label="粒" value="5"></el-option>
                <el-option label="胶囊" value="6"></el-option>
              </el-select>
            </el-input>
            <!-- <span class="lable_box" style="margin-left: 10px">用药频次</span>
                <el-select
                  v-model="item.frequency"
                  style="width: 200px"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option label="每日一次" value="1"></el-option>
                  <el-option label="每日两次" value="2"></el-option>
                  <el-option label="每日三次" value="3"></el-option>
                  <el-option label="每日四次" value="4"></el-option>
                  <el-option label="每晚一次" value="5"></el-option>
                  <el-option label="必要时一次" value="6"></el-option>
                  <el-option label="每周一次" value="7"></el-option>
                  <el-option label="每周两次" value="8"></el-option>
                  <el-option label="每周三次" value="9"></el-option>
                  <el-option label="隔周一次" value="10"></el-option>
                </el-select> -->
          </div>
          <p style="margin-top: 15px">
            <!-- <span class="lable_box" style="margin-left: 10px"
                    >降压药服药依从性</span
                  >
                  <el-select
                    v-model="item.compliance"
                    style="width: 200px"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option label="规律服药（80%以上）" value="1"></el-option>
                    <el-option label="间断服药（10%-80%）" value="2"></el-option>
                    <el-option label="很少或不服药（<10%）" value="3"></el-option>
                  </el-select> -->
          </p>
          <el-divider></el-divider>
        </div>
      </div>
      <p style="text-align: center">
        <el-button
          type="primary"
          plain
          size="small"
          style="width: 100%"
          @click="
            info.childsItems.push({
              drug: '',
              drugUsage: '',
              dose: '',
              usageUnit: '1',
            })
          "
          ><i class="el-icon-plus"></i> 新增用药情况</el-button
        >
      </p>
    </div>
    <div class="box">
      <span>过去一年是否因本病住院：</span>
      <el-radio-group v-model="info.lastyearinpat">
        <el-radio label="1">否</el-radio>
        <el-radio label="2">是</el-radio>
      </el-radio-group>
      <br />
      <span style="display: inline-block">住院次数</span>
      <el-radio-group v-model="info.inpattimes">
        <el-radio label="1">1次</el-radio>
        <el-radio label="2">2次</el-radio>
        <el-radio label="3">＞2次</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>此次随访情况分类：</span>
      <el-radio-group v-model="info.theServiceCategory">
        <el-radio label="1">满意</el-radio>
        <el-radio label="2">不满意，2周后再次随访</el-radio>
      </el-radio-group>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">转诊</p>
    <div class="box">
      <span>转诊：</span>
      <el-radio-group v-model="info.referral">
        <el-radio label="1">无</el-radio>
        <el-radio label="2">有</el-radio>
      </el-radio-group>
      <div v-if="info.referral == '2'">
        <el-input
          placeholder="请输入"
          v-model="info.referralMedicalDepartment"
          style="width: 300px"
          size="small"
        >
          <template slot="prepend">科别</template>
        </el-input>
        <br />
        <el-input
          placeholder="请输入"
          v-model="info.reason"
          style="width: 300px"
          size="small"
        >
          <template slot="prepend">原因</template>
        </el-input>
      </div>
    </div>
    <div class="box">
      <span>下次随访日期：</span>
      <el-date-picker
        v-model="info.nextDate"
        align="right"
        type="date"
        placeholder="选择下次随访日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span>随访人：</span>
      <!-- <el-select
            filterable
            placeholder="请选择随访人"
            size="small"
            style="width: 200px"
            v-model="info.unitName"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            filterable
            placeholder="请选择随访人"
            size="small"
            style="width: 200px; margin-left: 20px"
            v-model="info.executorName"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
      <el-input
        placeholder=""
        v-model="info.executorName"
        style="width: 220px"
        size="small"
      >
        <!-- <template slot="append">℃</template> -->
      </el-input>
    </div>
    <div class="box">
      <span>随访机构：</span>
      <!-- <el-select
            filterable
            placeholder="请选择随访人"
            size="small"
            style="width: 200px"
            v-model="info.unitName"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            filterable
            placeholder="请选择随访人"
            size="small"
            style="width: 200px; margin-left: 20px"
            v-model="info.executorName"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
      <el-input
        placeholder=""
        v-model="info.unitName"
        style="width: 220px"
        size="small"
      >
        <!-- <template slot="append">℃</template> -->
      </el-input>
    </div>
    <div class="box" v-if="false">
      <span>随访照片：</span>
      <el-button
        icon="el-icon-upload2"
        type="primary"
        style="background-color: #fff; color: rgb(46, 160, 254)"
        size="small"
        plain
        >本地上传文件</el-button
      >
      <el-button
        icon="el-icon-picture-outline"
        type="primary"
        style="background-color: #fff; color: rgb(46, 160, 254)"
        size="small"
        plain
        >加载手机图片</el-button
      >
      <p style="margin-top: 10px">
        扫描二维码，在手机端点击"上传"图片，在手机端上传后，点击上方"加载手机照片"按钮，即可同步到电脑端
      </p>
      <div>
        <img
          style="width: 100px"
          src="http://img.xjishu.com/img/zl/2017/10/212257159687020.gif"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
        
        <script>
export default {
  data() {
    return {
      info: {
        hospitalId: window.localStorage.getItem("hospitalId"),
        idNo: localStorage.getItem("idCard"),
        residentName: window.localStorage.getItem("residentName"),
        createUserId: window.localStorage.getItem("doctorName"),
        signFootArterial: [],
        isbreathtrain: [],
        insulinCount: [],
        childsItems: [],
        //   insulinItems: [],
      },
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      isLoading: false,
      restaurants: [],
      queryString: "",
      isTopDialog:false
    };
  },
  mounted() {
    if (this.sf_flag == 2) {
      this.info.typeChildDetail = 1;
    }
    if (this.sf_flag == 3) {
      this.info.typeChildDetail = 0;
    }
    this.set_form();
  },
  props: {
    sf_flag: { type: Number, default: 0 },
  },
  methods: {
    btn_ok() {
      var url = this.info.id ? "/mbSfMzf/Update" : "/mbSfMzf/Insert";
      this.info.signFootArterial = this.info.signFootArterial.toString();
      this.info.isbreathtrain = this.info.isbreathtrain.toString();
      this.info.insulinCount = this.info.insulinCount.toString();
      var date = new Date();
      this.info.id
        ? (this.info.updatetime = date)
        : (this.info.createtime = date);
      this.$post(url, this.info).then((res) => {
        if (res.code == 400) {
          this.$message({
            message: res.message,
            type: "error",
          });
          return;
        }
        this.$message({
          message: "操作成功",
          type: "success",
        });
      });
    },
    getInfo(item, flag) {
      this.isLoading = true;
      this.getOne(item.id, flag);
    },
    getOne(id, flag) {
      this.$post("/mbSfMzf/getOne?id=" + id).then((res) => {
        this.info = res.data;
        this.info.signFootArterial = this.info.signFootArterial
          ? this.info.signFootArterial.split(",")
          : [];
        this.info.isbreathtrain = this.info.isbreathtrain
          ? this.info.isbreathtrain.split(",")
          : [];
        this.info.insulinCount = this.info.insulinCount.split(",");
        this.isLoading = false;
        if (flag == "预览") {
          this.isTopDialog = true;
        }
      });
    },
    set_form() {
      this.isLoading = true;
      var d = new Date();
      d.setMonth(d.getMonth() + 3);
      var yy1 = d.getFullYear();
      var mm1 = d.getMonth() + 1; //因为getMonth（）返回值是 0（一月） 到 11（十二月） 之间的一个整数。所以要给其加1
      var dd1 = d.getDate();
      if (mm1 < 10) {
        mm1 = "0" + mm1;
      }
      if (dd1 < 10) {
        dd1 = "0" + dd1;
      }
      this.info.visitDate = new Date();
      this.info.nextDate = yy1 + "-" + mm1 + "-" + dd1;
      this.info.executorName = window.localStorage.getItem("doctorName");
      this.info.unitName = window.localStorage.getItem("hospitalName");
      this.isLoading = false;
    },
    clear_info() {
      this.info = {
        hospitalId: "3015",
        idNo: localStorage.getItem("idCard"),
        residentName: "",
        signFootArterial: [],
        isbreathtrain: [],
        insulinCount: [{}],
        childsItems: [],
        //   insulinItems: [],
      };
    },
    querySearch(queryString, cb) {
      if (!queryString) {
        return;
      }
      this.queryString = queryString;
      this.getYao();
      setTimeout((_) => {
        cb(this.restaurants);
      }, 500);

      // 调用 callback 返回建议列表的数据
    },
    handleSelect(item) {},
    getYao(val) {
      this.$get(
        baseUrl.mbIp + "/api/His/GetMedicineList/" + this.queryString
      ).then((res) => {
        var arr = [];
        for (var i in res.Data) {
          arr.push(res.Data[i]);
          arr[i].value = arr[i].drug_name;
        }
        this.restaurants = arr;
      });
    },
    sum_tz() {
      if (!this.info.height || !this.info.signWeight) {
        return;
      }
      this.isLoading = true;
      this.info.signBmi = this.toBmi(this.info.height, this.info.signWeight);
      this.isLoading = false;
    },
    sum_tz2() {
      if (!this.info.height || !this.info.targetWeight) {
        return;
      }
      this.isLoading = true;
      this.info.targetBmi = this.toBmi(
        this.info.height,
        this.info.targetWeight
      );
      this.isLoading = false;
    },
    toBmi(height, weight) {
      var height2 = height / 100;
      var sum = 0;
      sum = weight / (height2 * height2);
      return Math.round(sum * 100) / 100;
    },
  },
};
</script>
        
        <style scoped lang="scss">
.tnbhzsf {
  .top {
    padding: 10px 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  .tab1 {
    tr {
      width: 100%;
      th {
        text-align: center;
        color: #000;
        background-color: rgb(250, 250, 250);
      }
      td {
        padding: 10px;
      }
    }
  }
  .box {
    padding: 10px 250px;
    background-color: rgb(250, 250, 250);
    margin: 10px 0;
  }
}
.table_rd_pd {
  th,
  td {
    padding: 5px 10px;
  }
}
.pointer {
  pointer-events: none;
}
</style>